干货 | 盘点 Chrome 插件开发中那些关键的点！

点击上方 “AirPython”，选择 “加为星标”

第一时间关注 Python 原创干货！

1. 前言

大家好，我是安果！

最近在开发者模式下调试 Chrome 插件，发现安装扩展后默认会报错误，提示 v2 版本已经废弃，相关 API 功能将在明年不可使用，建议升级到 v3 版本

本篇文章将基于 v3 版本，盘点 Chrome 插件开发中的一些关键点供大家进行参考

2. 配置

v2 升级到 v3 后，manifest.json 配置文件需要进行下面修改

2-1  版本号

需要将 manifest_version 的值设置为 3

2-2  action

action 可以指定 Chrome 扩展图标设置、popup 页面等内容

在 v3 中使用关键字 action 取代 v2 中的关键字 browser_action

//v3
...
 "action": {
    "default_icon": {
      "16": "images/icon16.png",
      "32": "images/icon32.png"
    },
    "default_popup": "popup.html",
    "default_title": "HelloWorld"
}
...

2-3  background

在 v2 中，我们可以使用 scripts 关键字指定后台运行的脚本列表，再使用 persistent 关键字设置运行脚本的生命周期

当 persistent 设置为 true 时，脚本会一直在后台运行，因此会占用系统资源

//v2
...
 "background": {
    "persistent": false,
    "scripts": ["background.js"]
}
...

所以在 v3 版本中，使用 service_worker 关键字智能化启动脚本

PS：在 v3 中不能通过关键字 persistent  指定脚本的生命周期

//v3
...
"background": {
    "service_worker": "background.js"
}
...

3. 缓存

在 v3 中，使用下面的方式，将键值对存储到缓存中

//v3
...
//存储数据到缓存
//键：
chrome.storage.sync.set({username:'AirPython',password:'123456'},function(){
    console.log("保存成功！")
})
...

从缓存中获取数据，也有相应的 API

//v3
...
//获取缓存
chrome.storage.sync.get({username:"",password:""},function(items){
      //用户名和密码不为空
      if(items.username&&items.password){
          ...
      }
}) 
...

4. 定时任务

在 v2 中实现定时任务、延时任务非常方便，我们只需要在 background.js 创建一个定时任务，然后设置 persistent 为 true，这样就能保存定时任务一直在后台执行

由于 v3 切换成 service_worker  模式，如果想实现定时任务，只能使用 alarms 来实现

//v3-manifest.json
...
"permissions": [
    ...
    "alarms"
  ]
...

操作步骤如下：

• 在 manifest 设置 alarms 权限

• 在 background 中，使用 alarms 创建定时任务

//v3 background.js
...
function peroidFunc(){
    ...
}
// 定时器
chrome.alarms.onAlarm.addListener((alarm) => {
     //执行一次
     peroidFunc()
});

//1分钟执行一次定时任务
chrome.alarms.create({ periodInMinutes: 1.0 });
...

5. 网络请求

网络请求主流的 4 种方式包含：

• Ajax

• Jquery

• fetch

• Axios

这里以第三种方式 fetch 为例

...
function login_do(tab,username,password){
    const url = HOST + 'do_login'
    const params = {
        headers:{
            "content-type":"application/json;charset=UTF-8"
        },
        body:JSON.stringify({
            "username":username,
            "password":password.replace(/(^\s*)|(\s*$)/g, "")     //去掉前后空格
        }),
        method:"POST"
    }
    fetch(url,params)
    .then(data=>{
        return data.json()
    })
    .then(res=>{
        if(res.err_code==0){
            show(res.data.tips,"登录成功")
        }else{
            warn(res.err_msg)
        }
    })
    .catch(error=>{
        console.log(error)
        warn("重置失败，请检查数据！")
    })
}
...

6. 自动化

Chrome 插件完全可以实现一些自动化场景，以此增加我们工作的效率

比如，之前写过的自动登录

文中模拟文本框输入的 API 已经废弃，建议使用下面的方式完成文本框的输入

...
//输入
function input(inputElement, content) {
    // 注意：evt.initEvent已经废弃，使用下面的方式替代
    // let evt = document.createEvent('HTMLEvents');
    // evt.initEvent('input', true, true);

    //新的方式
    var evt = new Event("input", {"bubbles":true, "cancelable":false});
    document.dispatchEvent(evt);
    inputElement.value = content;
    inputElement.dispatchEvent(evt)
}
...

7. 最后

最后，还要补充一点的是，在 v3 版本中的 background 不能直接使用 window 对象，这里建议通过 Tab 标签或消息通信的方式来实现

在开发一些简单的工具类插件，原生 HTML + JS + Jquery 完全够用；但是面对一些复杂页面的需求，这里更推荐使用「 Vue + 预设」的方式来快速开发，这部分内容有需要的小伙伴可以自行扩展

https://vue-web-extension.netlify.app/intro/setup.html

如果你觉得文章还不错，请大家 点赞、分享、留言 下，因为这将是我持续输出更多优质文章的最强动力！

推荐阅读

END

🧐分享、点赞、在看，给个三连击呗！